<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-10-18 13:33:38
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-07-26 14:32:18
 * @FilePath: \hy-ui\src\views\app\appInfo\components\detail\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="detail">
    <el-card class="box-card" shadow="false">
      <div class="headerTabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="数据模型" name="1">
            <dataModel :appId="appId" :tablePrefix="tablePrefix" v-if="activeName === '1'" />
          </el-tab-pane>
          <el-tab-pane label="表单模型" name="2">
            <formModel :appId="appId" v-if="activeName === '2'"  :tablePrefix="tablePrefix"/>
          </el-tab-pane>
          <el-tab-pane label="流程模型" name="3">
            <processModel :appId="appId" v-if="activeName === '3'" />
          </el-tab-pane>
          <el-tab-pane label="页面模型" name="4"
            ><pageModel :appId="appId" v-if="activeName === '4'"
          /></el-tab-pane>
          <el-tab-pane label="数据字典" name="5"
            ><dataDict :appId="appId" v-if="activeName === '5'"
          /></el-tab-pane>
          <el-tab-pane label="菜单配置" name="6"
            ><menuConfig :appId="appId" v-if="activeName === '6'"
          /></el-tab-pane>
        </el-tabs>
        <el-button
          type="primary"
          class="goBack"
          style="background: #2f54eb"
          @click="goBack"
          size="mini"
          >返回</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import dataModel from "./dataModel";
import formModel from "./formModel";
import processModel from "./processModel";
import pageModel from "./pageModel";
import dataDict from "./dataDict";
import menuConfig from './menuConfig'

export default {
  name: "detail",
  components: {
    dataModel,
    formModel,
    processModel,
    pageModel,
    dataDict,
    menuConfig
  },
  props: {
    goBack: {
      type: Function,
      default: () => {},
    },
    appId: {
      type: String,
      default: "",
    },
    index: {
      type: String,
      default: "",
    },
    tablePrefix:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      activeName: "1",
    };
  },

  mounted() {
    if (this.index) {
      this.activeName = this.index;
      sessionStorage.removeItem("designParams");
    }
  },
  methods: {
    handleClick(tabsPaneContext) {
      console.log(tabsPaneContext.activeName);
      if (tabsPaneContext.name === "3") {
        // this.$router.push("/workflow/process/app-model/" + this.appId);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.detail {
  .headerTabs {
    position: relative;

    ::v-deep .is-active {
      color: #2f54eb;
    }

    ::v-deep .el-tabs__active-bar {
      background: #2f54eb;
    }

    .goBack {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
